<template>
	<view class="icons">
		<view class="icon-item" v-for="(i,idx) in list" :key="idx">
			<image :src="i.url" mode="" class="img"></image>
			<text class="txt">{{i.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
		},
	}
</script>

<style lang="scss">
	.icons {
		display: flex;
		flex-wrap: wrap;

		.icon-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			padding: {
				top: $pd20;
			}

			.img {
				width: 110rpx;
				height: 110rpx;
			}

			.txt {
				text-align: center;
			}
		}
	}
</style>
